<template>
  <div class="login-bg" ref="loginBg">

    <div class="head">
      <img src="../../../static/images/login/logo@2x.png" alt="">
    </div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" required v-model="phoneNum">
        </div>
        <!--<div class="weui-cell__ft">-->
          <!--<a href="javascript:;" class="weui-vcode-btn" v-show="show" @click="getVcode">获取验证码</a>-->
          <!--<a href="javascript:;" class="weui-vcode-btn" v-show="!show">{{count}}s后重发</a>-->
        <!--</div>-->
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="password" placeholder="请输入密码" v-model="password"/>
        </div>
      </div>

      <!--<div class="weui-cell">-->
        <!--<div class="weui-cell__bd">-->
          <!--<input class="weui-input" type="text" placeholder="请输入验证码" v-model="vCode"/>-->
        <!--</div>-->
      <!--</div>-->

      <div class="weui-cell weui-cell_switch" v-if="isWX">
        <div class="weui-cell__bd">
          开启接收微信通知
          <p>(您可以即时接收拍品、订单动态信息)</p>
        </div>
        <div class="weui-cell__ft">
          <input class="weui-switch" type="checkbox" checked="checked" v-model="isWxNotice"/>
        </div>
      </div>

      <div class="weui-cell register">
        <div class="weui-cell__bd">
          <router-link :to="{name:'resetPassword'}">重置密码</router-link>
        </div>
        <div class="weui-cell__ft">
          <router-link :to="{name:'bindPhone'}">注册</router-link>
        </div>
      </div>


      <div class="weui-cell btn">
        <div class="weui-cell__bd">
          <button class="login_btn weui-btn weui-btn_warn" :class="{active:isActive}" type="button" @click="loginClick">登录</button>
        </div>
      </div>

      <div class="agree">
        登录即同意<router-link :to="{name:'agreement'}">《拍拍拍钱币用户协议》</router-link>
      </div>





    </div>


  </div>
</template>

<script>
  import {ipconfig} from "../../assets/js/ipconfig";
  import {isWeiXin,setStore,isPoneAvailable,setUser,getStatusMapByKey,getRequest} from '../../assets/js/tools.js';
  import {doLogin,getUserMsg} from '../../assets/js/getData';
  export default {
    name: "login",
    data(){
      return {
        wxWebAuthUrl:ipconfig.wxWebAuthUrl,
        show:true,
        count:'',
        timer:null,
        phoneNum:'',//手机号
        password:'',//密码
        isWxNotice:true,
        isWX:null,//是否微信浏览器

        formBindPhone:null,

        instance:null,
      }
    },
    created(){
      this.eSmsCodeType = getStatusMapByKey('eSmsCodeType')['login'].code;
      //判断是否获取微信
      this.isWX = isWeiXin();

      this.formBindPhone = this.$route.query.formBindPhone;
      if(this.$route.query.hasOwnProperty('phoneNum')){
        this.phoneNum = this.$route.query.phoneNum;
      }

      let code= getRequest().code;
      if(code&&this.formBindPhone!=1){
        let wx = getStatusMapByKey('eLoginChannel')['wx'].code;// let wx = 'WX';
        // 获取微信用户信息
        getUserMsg(wx,code).then(res => {
          if(res.data.reqResult.code>0){
            let data = res.data.data;
            this.phoneNum = data.user.mobileNo;
            setStore('wxUserInfo',data);
          }else {
            //获取微信授权code
            // this.getWxCode();
            // Toast(res.data.reqResult.msg);
          }
        });
      }

    },
    mounted(){
      // 元素的实际高度
      let h = this.$refs.loginBg.offsetHeight;
      let h2 = document.documentElement.clientHeight; //可见区域高度
      if(h<h2){
        this.$refs.loginBg.style.height = h2+'px';
      }
    },
    computed:{
      isActive(){
        if(this.phoneNum&&this.password){
          return true;
        }else {
          return false;
        }
      }
    },
    methods:{
      // 登录
      loginClick(){
        if(!this.isActive){
          return;
        }
        if(!isPoneAvailable(this.phoneNum)) {
          Toast('请输入正确的手机号');
          return;
        }
        if(!this.password) {
          Toast('请输入密码');
          return;
        }

        let eBooleanStatus = getStatusMapByKey('eBooleanStatus');
        let isWxNotice = this.isWxNotice ? eBooleanStatus['yes'].val : eBooleanStatus['no'].val;
        let data = {
          authType: 0,
          account: this.phoneNum,
          password: this.password,
          loginType: 2,
        };
        if(this.isWX){
          data.isWxNotice = isWxNotice;
        }
        doLogin(data).then(res => {
          if(res.data.reqResult.code>0){
            let user = res.data.data;
            setUser(user);
            if(user.wasUpdateName==0){
              this.$router.push({name: 'setName'});
              return;
            }
            if(user.hasOwnProperty("affiliationCountry")){
              let url = process.env.NODE_ENV === 'production' ? ipconfig.wxWebAuthUrl : 'http://localhost:8080/';
              window.location.replace(url+'#'+this.$route.query.redirect);
            }else {
              this.$router.push({name: 'setCountry'});
            }
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
    }
  }
</script>

<style scoped>
  .login-bg{
    width: 100%;
    padding: 2.5rem 0;
    background: url("../../../static/images/login/login_bg.jpg") no-repeat;
    background-size: cover;
  }
  .head{
    text-align: center;
  }
  .head img{
    width: 3.35rem;
  }
  .weui-cells{
    margin-top: 1.7rem;
    padding: 0 1.9rem;
    background-color: transparent;
  }
  .weui-cells:before{
    border-top: none;
  }
  .weui-cells:after{
    border: none;
  }
  .weui-cell {
    padding: 1.3rem 0.6rem 0.65rem 0.6rem;
  }
  .weui-cell:before{
    border-top:1px solid #666666;
    left: 0;
  }
  .weui-input{
    font-size: 0.75rem;
    color: #ffffff;
  }
  .weui-cell_switch{
    align-items: flex-start;
  }
  .weui-cell_switch .weui-cell__bd{
    color: #ffffff;
    font-size: 0.75rem;
  }
  .weui-cell_switch .weui-cell__bd p{
    color: #999999;
    font-size: 0.6rem;
    margin-top: 0.2rem;
  }
  .weui-cell.btn:before{
    border: none;
  }
  .weui-switch:checked, .weui-switch-cp__input:checked ~ .weui-switch-cp__box{
    border-color: #BF4C4C;
    background-color: #BF4C4C;
  }
  .weui-switch, .weui-switch-cp__box {
    width: 42px;
    height: 22px;
  }
  .weui-switch:after, .weui-switch-cp__box:after {
    width: 20px;
    height: 20px;
  }
  .weui-switch:before, .weui-switch-cp__box:before {
    width: 41px;
    height: 21px;
  }
  .weui-input{
    color: #ffffff;
  }
  .btn{
    padding: 0.75rem 0 1.05rem 0;
  }
  .login_btn{
    background-color: #874545;
    font-size: 0.75rem;
    box-shadow: 0px 2px 2px 0 rgba(0,0,0,0.4);
  }
  .login_btn.active{
    background-color: #AE1717;
  }
  .btn .login_btn.active:active{
    background-color: #AE1717;
  }
  .btn .login_btn:active{
    background-color: #874545;
    color: #ffffff;
  }
  .register{
    padding: 0.7rem 0.6rem;
  }
  .register a{
    color: #C3C3C3;
    font-size: 0.6rem;
  }
  .agree{
    font-size: 0.6rem;
    color: #C3C3C3;
    padding-left: 0.6rem;
  }
  .agree a{
    font-size: 0.6rem;
    color: #BF4C4C;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
</style>
